<template>
<div style="margin: 10px">
  <el-card >
      <div>商品分类</div>
    <el-button type="primary" style="margin: 20px 0" @click="addGoodSort"><span style="padding-right: 5px;font-size: 25px">+</span>新增</el-button>
    <div>
      <el-table
          :data="tableData"
          style="width: 100%"
          row-key="good_type_id"
          lazy
          :tree-props="{ children: 'children', hasChildren: 'hasChildren'}"
          v-loading="loading"
      >
        <el-table-column prop="good_type_id" label="分类ID" width="240" />
        <el-table-column prop="type_name" label="分类名称" width="300" />
        <el-table-column  label="图片" width="240" >
          <template #default="scope">
           <a v-if="scope.row.pic" :href="scope.row.pic" target="_blank"><img :src="scope.row.pic" style="width: 50px;height: 50px" alt=""></a>
            <div v-else> <el-empty description="没有图片" style="width: 50px;height: 50px" :image-size="50" /></div>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="240" >
          <template #default="scope">
            <span>{{scope.row.status===1?'显示':'不显示'}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="create_time" label="添加时间" width="300" />
        <el-table-column label="操作" width="240" >
          <template #default="scope">
            <el-link type="primary" style="margin-right: 10px" @click="editGoodsSort(scope)">编辑</el-link>
            <el-link type="primary" @click="deleteGoodsSort(scope)">删除</el-link>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-card>
<!--  新增-->
  <goods-sort-add ref="addShow" @successAdd="successAdd"></goods-sort-add>
<!--编辑-->
  <goods-sort-edit ref="editShow" :goodsInfo="goodsInfo" @successEdit="successEdit"></goods-sort-edit>
</div>
</template>
<script setup>
import {onMounted,ref} from "vue";
import {getGoodsTypeList} from "../../../HTTP/api/goods";
import {ElMessage, ElMessageBox} from "element-plus";
import {getPermissionListArr} from "@/util/getUser";
import {deleteGoodtype} from "../../../HTTP/api/goods";
import GoodsSortAdd from './GoodsSortAdd'
import GoodsSortEdit from './GoodsSortEdit'
let goodsInfo=ref()
let tableData=ref()
let addShow=ref()
let editShow=ref()
let loading=ref(true)
onMounted(()=>{
      getList()
})
function getList(){
  loading.value=true
  getGoodsTypeList().then(res=>{
    if(res.code===2000){
      tableData.value=getPermissionListArr(res.data)
    }else {
      ElMessage.error("数据异常")
    }
  }).then(()=>{
    loading.value=false
  })
}
//新增
const addGoodSort=()=>{
  addShow.value.showAdd=true
}
//编辑
const editGoodsSort=(scope)=>{
  goodsInfo.value=scope.row
  editShow.value.showAdd=true
}
//删除
const deleteGoodsSort=(scope)=>{
  ElMessageBox.confirm(
      '是否删除该分类?',
      'Warning',
      {
        confirmButtonText: 'OK',
        cancelButtonText: 'Cancel',
        type: 'warning',
      }
  ).then(()=>{
    deleteGoodtype({id:scope.row.good_type_id}).then(res=>{
        if(res.code===2000){
          ElMessage({
            type:'success',
            message:'删除成功'
          })
          getList()
        }else {
          ElMessage.error("删除失败")
        }
    })
  })

}
const successAdd=()=>{
  getList()
}
const successEdit=()=>{
  getList()
}
</script>

<style scoped>
.demo-image__error .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  display: inline-block;
  width: 49%;
  box-sizing: border-box;
  vertical-align: top;
}
.demo-image__error .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
.demo-image__error .el-image {
  padding: 0 5px;
  max-width: 300px;
  max-height: 200px;
  width: 100%;
  height: 200px;
}

.demo-image__error .image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: var(--el-fill-color-light);
  color: var(--el-text-color-secondary);
  font-size: 30px;
}
.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}
</style>
